<!DOCTYPE html>
<html ng-app="planInput" ng-cloak>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/lib/navbar/css/responsive-menu.css" rel="stylesheet">
    <link href="/lib/bootstrap-datetime/css/jquery.datetimepicker.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="/lib/angular-toastr/dist/angular-toastr.css"/>
    <link rel="stylesheet" href="/lib/angular-ui-select/dist/select.css">
    <link rel="stylesheet" href="/lib/jquery-ui/jquery-ui.min.css">
    <link href="/css/style.css" rel="stylesheet">

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/jquery-ui/jquery-ui.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/lib/jquery/jquery.cookie.min.js"></script>
    <script src="/lib/jquery/jquery.scrollTo.min.js"></script>
    <script src="/lib/navbar/js/modernizr.min.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/modernizr-custom.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/responsive-menu.js" type="text/javascript"></script>

    <script src="/lib/angular/angular.js"></script>
    <script src="/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <script src="/lib/angular-ui-select/dist/select.js"></script>
    <script src="/js/directives.js"></script>
    <script src="/lib/bootstrap-datetime/js/jquery.datetimepicker.js"></script>
    <script src="/js/planInputController.js"></script>

    <title>计划安排</title>
</head>
<body ng-controller="planInputController">

<% include navbar %>

<div id="scroll" class="col-md-12" style="padding: 0 45px;">
    <h2 class="group-head"><span>填写开发计划安排</span></h2>

    <div style="display: none" id="userId"><%- self %></div>

    <div id="step1" class="col-md-11">
        <h2 class="group-head"><span>1.填写人力分配</span></h2>
        <span class="fa fa-angle-double-up fa-angle-double-down" id="expand-0" data-toggle="tooltip"
              data-placement="left" title="展开 / 收起"
              style="position: relative;top:-30px;left:98%;z-index: 100"></span>

        <div class="part-0">
            <div class="col-md-4" style="margin-bottom: 30px;">
                <div class="list-group" style="margin-bottom: 5px;">
                    <a class="list-group-item active"
                       style="border: solid 1px #007FBB;background-color: #007F99;color:white;">开发人员</a>
                    <a class="list-group-item list-group-item-warning active member" id="member<%- self %>"
                       style="text-align: left"
                       ng-click="editDetail(<%- self %>)">
                        &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-user"></i>&nbsp;&nbsp;研发组长 : <%- user.name %></a>
                    <% members.forEach(function(e) { %>
                    <a class="list-group-item list-group-item-warning member" id="member<%- e.u_id %>"
                       style="text-align: left"
                       ng-click="editDetail(<%- e.u_id %>)">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="fa fa-angle-right" style="font-weight: bold"></i>&nbsp;&nbsp;<%- e.u_name %></a>
                    <% }); %>
                </div>
            </div>
            <div class="col-md-8" style="overflow: visible">
                <ul class="list-group plan-detail-group" style="overflow: visible">
                    <li class="list-group-item" style="background-color: #997">
                        <div class="col-md-3 fa fa-user" style="text-align: left;padding:3px 0 0 20px">&nbsp;&nbsp;<span
                                    ng-bind="currentEdit"></span></div>
                        <div class="col-md-4" style="text-align: right">详细开发计划</div>
                        <div class="col-md-5" style="overflow: visible">
                            <a class="fa fa-trash-o text-danger pull-right" data-toggle="tooltip"
                               data-placement="left" title="移除所选条目" ng-click="deleteOneDetail()"
                               style="font-size: 16px;margin-top:1px;"></a>
                            <a class="glyphicon glyphicon-plus pull-right" data-toggle="tooltip"
                               data-placement="left" title="添加一条记录" ng-click="addOneDetail()"
                               style="margin-right: 5px;"></a>

                            <div class="fa fa-question-circle text-warning pull-right" data-toggle="tooltip"
                                 data-placement="left"
                                 title="Tip:系统会自动过滤百分比0或空项"
                                 style="font-size: 16px;margin-top:1px;margin-right:10px;"></div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div id="step2" class="col-md-11">
        <h2 class="group-head"><span>2.研发风险及解决措施</span></h2>
        <span class="fa fa-angle-double-up fa-angle-double-down" id="expand-1" data-toggle="tooltip"
              data-placement="left" title="展开 / 收起"
              style="position: relative;top:-30px;left:98%;z-index: 100"></span>

        <div class="part-1">
            <div class="col-md-12">
                <div class="list-group extra-info" id="extra-risk">
                    <div class="list-group-item active" style="background-color: #955;color:white">
                        <div class="col-md-7" style="text-align: left">研发风险及解决措施</div>
                        <div class="col-md-5">
                            <a class="fa fa-trash-o pull-right trash-tip" data-toggle="tooltip"
                               data-placement="left" title="移除所选项" ng-click="deleteExtra('risk')"></a>
                            <a class="glyphicon glyphicon-plus pull-right plus-tip" data-toggle="tooltip"
                               data-placement="left" title="添加一项" ng-click="addOneExtra('risk')"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="step3" class="col-md-11">
        <h2 class="group-head"><span>3.人员成长和培养计划</span></h2>
        <span class="fa fa-angle-double-up fa-angle-double-down" id="expand-2" data-toggle="tooltip"
              data-placement="left" title="展开 / 收起"
              style="position: relative;top:-30px;left:98%;z-index: 100"></span>

        <div class="part-2">
            <div class="col-md-12">
                <div class="list-group" id="extra-training">
                    <div class="list-group-item active" style="background-color: #1A88D3;color:white">
                        <div class="col-md-7" style="text-align: left">人员成长和培养计划</div>
                        <div class="col-md-5">
                            <a class="fa fa-trash-o pull-right trash-tip" data-toggle="tooltip"
                               ng-click="deleteExtra('training')"
                               data-placement="left" title="移除所选项"></a>
                            <a class="glyphicon glyphicon-plus pull-right plus-tip" data-toggle="tooltip"
                               data-placement="left" title="添加一项" ng-click="addOneExtra('training')"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="step4" class="col-md-11" style="padding-bottom: 100px;">
        <h2 class="group-head"><span>4.人员变动及其他信息</span></h2>
        <span class="fa fa-angle-double-up fa-angle-double-down" id="expand-3" data-toggle="tooltip"
              data-placement="left" title="展开 / 收起"
              style="position: relative;top:-30px;left:98%;z-index: 100"></span>

        <div class=" part-3">
            <div class="col-md-12">
                <div class="list-group" id="extra-change">
                    <div class="list-group-item active" style="background-color: #8a6d3b;color:white">
                        <div class="col-md-7" style="text-align: left">人员变动及其他信息</div>
                        <div class="col-md-5">
                            <a class="fa fa-trash-o pull-right trash-tip" data-toggle="tooltip"
                               ng-click="deleteExtra('change')"
                               data-placement="left" title="移除所选项"></a>
                            <a class="glyphicon glyphicon-plus pull-right plus-tip" data-toggle="tooltip"
                               data-placement="left" title="添加一项" ng-click="addOneExtra('change')"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="z-index: 1001">
            <button class="pull-right btn btn-lg btn-danger fa fa-chevron-left margin-top-20"
                    style="padding: 10px 8px;position: fixed;width:7%;top:80%;left:89%" ng-click="backWard()">&nbsp;&nbsp;返回
            </button>
            <button class="pull-right  btn btn-lg btn-primary fa fa-book margin-top-20"
                    style="padding: 10px 8px;position: fixed;width:7%;top:88%;left:89%" ng-click="saveAll($event)">
                &nbsp;&nbsp;保存
            </button>
        </div>
    </div>

    <div id="step" class="col-md-1" style="position: fixed;top:20%;left:89%">
        <div class="panel panel-info">
            <div class="panel-heading" style="padding-left:0;padding-right:0;text-align: center">填写步骤</div>
            <div class="list-group">
                <button scrolltarget="#step1" class="scroll list-group-item list-group-item-success">1.人力分配</button>
                <button scrolltarget="#step2" class="scroll list-group-item list-group-item-danger">2.风险问题</button>
                <button scrolltarget="#step3" class="scroll list-group-item list-group-item-info">3.人员成长</button>
                <button scrolltarget="#step4" class="scroll list-group-item list-group-item-warning">4.其他信息</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade  remove-mem" style="position: fixed;top:40px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">返回将丢失所填写的信息，确认返回？</h4>
            </div>
            <div class="modal-body" style="height: 70px;">
                <button type="button" class="btn btn-success col-md-2 pull-right" id="ensure-remove">确认</button>
                <button type="button" class="btn btn-warning col-md-2 pull-right" style="margin-right: 20px"
                        data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade announcement">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">下次计划安排通知</h4>
            </div>
            <div class="modal-body">
                <p id="announcement"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">我知道了</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(function ($) {
            var menu = $('.rm-nav').rMenu({
                minWidth: '960px'
            });
        });
        $(".scroll").each(function () {
            var self = this;
            $(this).click(function () {
                if ($(".part-" + ($(self).attr("scrollTarget").substring(5, 6) - 1)).css('display') == 'none') {
                    $("#expand-" + ($(self).attr("scrollTarget").substring(5, 6) - 1)).toggleClass("fa-angle-double-down");
                }
                $(".part-" + ($(self).attr("scrollTarget").substring(5, 6) - 1)).show(300,function(){
                    $('body').scrollTo($(self).attr("scrollTarget"), 300);
                });
            });
        });

        $(".fa-angle-double-up").each(function () {
            $(this).toggleClass("fa-angle-double-down");
            $(".part-" + $(this).attr("id").split("-")[1]).hide(0);
            $(this).on('click', function () {
                $(this).toggleClass("fa-angle-double-down");
                $(".part-" + $(this).attr("id").split("-")[1]).toggle(300);
            });
        });
        setTimeout(function () {
            $(".fa-angle-double-up")[0].click();
        }, 100);

        $('[data-toggle="tooltip"]').tooltip();

    });
</script>
</body>
</html>